import { Component, ElementRef, ViewChild, Renderer2, ViewEncapsulation } from '@angular/core';
import { ApesField } from './apes-field';
import { ApiService } from '@core/services/http/api.service';
import { Events } from '@core/services/events/Events';
import { ExpressionService } from '@core/services/expression/ExpressionService';
import { SubjectService } from '@core/services/events/subject.service';
import { ApesDialogComponent } from '@shared/dialog';
import { ApesModalService } from '@shared/apes/modal';
import { DialogExpressionComponent } from '@shared/dialog-expression';

@Component({
  selector: 'formly-field-input-expression',
  encapsulation: ViewEncapsulation.None,
  template: `
    <apes-input-group [apesSuffix]="suffixIconSearch">
      <input type="text" apes-input placeholder="点击配置表达式"/>
    </apes-input-group>
    <ng-template #suffixIconSearch>
      <i apes-icon apesType="plus-square" (click)="clickBtn()"></i>
    </ng-template>
  `,
})
export class FormlyFieldInputExpression extends ApesField {

  @ViewChild('inputElement', { static: false }) inputElement: ElementRef;

  constructor(
    protected apiService: ApiService,
    protected events: Events,
    protected expressionService: ExpressionService,
    protected subject: SubjectService,
    protected elementRef: ElementRef,
    protected renderer: Renderer2,
    private modalService: ApesModalService,
  ) {
    super(apiService, events, expressionService, subject);
  }

  value: any = '';
  loading: any = null;

  ngOnInit() {
    this.addEventListener(this.elementRef, this.renderer);
  }

  ngAfterViewInit() {
  }

  clickBtn(){
    this.openDialog((result)=>{
      console.log('表达式结果',result);
    });
  }

  openDialog(callback) {
    let body = {};
    const dialogRef = this.modalService.create({
      apesWidth: '50vw',
      apesTitle: '配置表达式',
      apesContent: DialogExpressionComponent,
      apesComponentParams: body,
      apesFooter: [
        {
          label: '取消',
          type: 'default',
          onClick: () => {
            dialogRef.close();
          },
        },
        {
          label: '确定',
          type: 'primary',
          disabled: (componentInstance) => {
            let disabled = true;
            if (componentInstance['pureSearch']) return false;
            return disabled;
          },
          onClick: (componentInstance) => {
            dialogRef.destroy(componentInstance['resultsData']);
          },
        },
      ],
    });

    return dialogRef.afterClose.subscribe((result) => callback(result));
  }

}
